import {
  Col, Row, Statistic, Button, Spin,
} from 'antd';
import { useRequest, useUnmount } from 'ahooks'
import { getStoreNumber, getUserNumber } from '../../../api/data';

const Schedule = () => {
  const { data: userNumber, loading: userLoading, run: userAction } = useRequest(getUserNumber)
  const {
    data: storeNumber,
    loading: storeLoading,
    run: storeAction,
    cancel: cancelPolling,
  } = useRequest(getStoreNumber, { pollingInterval: 3000 })

  useUnmount(() => {
    cancelPolling()
  })
  return (
    <>
      <h3>待办事项</h3>
      <Row gutter={24}>
        <Col span={6}>
          <Spin spinning={userLoading}>
            <Statistic value={userLoading ? '...' : userNumber} />
          </Spin>
          <Button loading={userLoading} type="text" onClick={userAction}>待退款订单</Button>
        </Col>
        <Col span={6}>
          <Spin spinning={storeLoading}>
            <Statistic value={storeLoading ? '...' : storeNumber} />
          </Spin>
          <Button loading={storeLoading} type="text" onClick={storeAction}>异常订单</Button>
        </Col>
        <Col span={6}>
          <Statistic value={0} />
          <Button type="text">网络异常设备</Button>
        </Col>
        <Col span={6}>
          <Statistic value={0} />
          <Button type="text">售卖异常设备</Button>
        </Col>
      </Row>
    </>
  )
}

export default Schedule;
